<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用下载中心</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        neutral: '#1f2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .download-card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .download-card-hover {
                transition: all 0.3s ease;
            }
            .download-card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 页面容器 -->
    <div class="container mx-auto px-4 py-12">
        <!-- 页面标题 -->
        <header class="text-center mb-16">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-neutral mb-4">应用下载中心</h1>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                选择适合您设备的版本下载应用
            </p>
        </header>
        
        <!-- 下载卡片区域 -->
        <div class="max-w-6xl mx-auto space-y-8">
            <!-- 第一行：Android 和 iOS -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Android 下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="2.png" alt="Android 下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-green-600 mb-4">
                            <i class="fa fa-android"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">Android 版</h3>
                        <p class="text-gray-500 mb-6">适用于安卓智能手机和平板</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
                
                <!-- iOS 下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="https://picsum.photos/seed/iosqrcode/200/200" alt="iOS 下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-gray-800 mb-4">
                            <i class="fa fa-apple"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">iOS 版</h3>
                        <p class="text-gray-500 mb-6">适用于 iPhone 和 iPad</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 第二行：Windows 32位 和 Windows 64位 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Windows 32位下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="https://picsum.photos/seed/windows32qrcode/200/200" alt="Windows 32位下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-blue-600 mb-4">
                            <i class="fa fa-windows"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">Windows 32位</h3>
                        <p class="text-gray-500 mb-6">适用于 32位 Windows 7/8/10/11</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
                
                <!-- Windows 64位下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="https://picsum.photos/seed/windows64qrcode/200/200" alt="Windows 64位下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-blue-600 mb-4">
                            <i class="fa fa-windows"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">Windows 64位</h3>
                        <p class="text-gray-500 mb-6">适用于 64位 Windows 7/8/10/11</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 第三行：Mac Intel 和 Mac ARM -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Mac Intel 下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="https://picsum.photos/seed/macintelqrcode/200/200" alt="Mac Intel 下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-gray-700 mb-4">
                            <i class="fa fa-apple"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">Mac Intel</h3>
                        <p class="text-gray-500 mb-6">适用于 Intel 芯片 Mac</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
                
                <!-- Mac ARM 下载卡片 -->
                <div class="bg-white rounded-xl overflow-hidden download-card-shadow download-card-hover">
                    <div class="p-6 text-center">
                        <!-- 二维码图片 -->
                        <div class="mb-6 flex justify-center">
                            <img src="https://picsum.photos/seed/macarmqrcode/200/200" alt="Mac ARM 下载二维码" class="w-48 h-48 object-cover rounded-lg border-2 border-gray-100">
                        </div>
                        <!-- 操作系统图标 -->
                        <div class="text-4xl text-gray-700 mb-4">
                            <i class="fa fa-apple"></i>
                        </div>
                        <!-- 标题和描述 -->
                        <h3 class="text-xl font-semibold mb-2 text-neutral">Mac ARM</h3>
                        <p class="text-gray-500 mb-6">适用于 Apple Silicon 芯片 Mac</p>
                        <!-- 下载按钮 -->
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-600 transition-all duration-200">
                            <i class="fa fa-download mr-2"></i>
                            立即下载
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <footer class="mt-20 text-center text-gray-500">
            <div class="max-w-3xl mx-auto">
                <p class="mb-4">
                    <i class="fa fa-info-circle mr-2"></i>
                    扫码下载更快捷，或点击下方链接直接下载
                </p>
    
                <p class="mt-8 text-sm">
                    &copy; 2023 应用名称 版权所有 | 版本号 v1.0.0
                </p>
            </div>
        </footer>
    </div>
    
    <!-- JavaScript 交互 -->
    <script>
        // 为下载按钮添加点击效果
        document.querySelectorAll('a[href="#"]').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                // 这里可以添加实际的下载逻辑或其他交互
                this.classList.add('scale-95');
                setTimeout(() => {
                    this.classList.remove('scale-95');
                }, 150);
            });
        });
        
        // 页面加载时的淡入效果
        document.addEventListener('DOMContentLoaded', function() {
            document.body.classList.add('opacity-100');
            document.body.classList.remove('opacity-0');
        });
    </script>
</body>
</html>